<template>
	<view class="my_team">
		<view class="head">
			<view class="cell">头像</view>
			<view class="name">账号/邀请时间</view>
			<view class="cell">等级</view>
		</view>
		<scroll-view scroll-y class="scroll_view" @scrolltolower="loadmore">
			<view class="list">
				<view class="item" v-for="item in _this.list">
					<view class="avatar">
						<image :src="item.head_portrait"></image>
						<view>{{item.id}}</view>
					</view>
					<view class="item_view">
						<view class="phone">{{item.nickname}}</view>
						<view class="time">{{item.created_at}}</view>
					</view>
					<view class="status">{{item.level_name}}</view>
				</view>
			</view>
			<uv-load-more :status="_this.loadmore_status" line @loadmore="loadmore" />
		</scroll-view>
	</view>
</template>

<script setup>
	import {
		userTeam
	} from "@/request/api";
	import useList from "@/hooks/useList.js";
	const {
		_this
	} = useList();
	import {
		ref
	} from "vue";
	const getList = async () => {
		let {
			list
		} = await userTeam({
			page: _this.page,
			limit: _this.limit
		});
		_this.last_page = list.last_page;
		list = list.list;
		_this.list = _this.page == 1 ? list : [..._this.list, ...list];
		_this.loadmore_status = _this.last_page == _this.page ? 'nomore' : 'loadmore';
	};
	getList();
	const loadmore = () => {
		if (_this.page >= _this.last_page) return;
		_this.page++;
		getList();
	};
</script>

<style scoped lang="scss">
	.my_team {
		.head {
			height: 80rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.cell {
				width: 125rpx;
				color: #666666;
				font-size: 24rpx;

				&:last-child {
					text-align: right;
				}
			}

			.name {
				flex: 1;
				color: #666666;
				font-size: 24rpx;
			}
		}

		.scroll_view {
			height: calc(100vh - var(--window-top) - var(--window-bottom) - #{$navBarHeight} - 200rpx);

			.list {
				border-radius: 20rpx;
				padding: 0 30rpx;
				box-sizing: border-box;
				background: #FFFFFF;
				overflow: hidden;

				.item {
					border-bottom: 1px solid #EEEEEE;
					padding: 30rpx 0;
					box-sizing: border-box;
					display: flex;
					justify-content: space-between;
					align-items: center;

					&:last-child {
						border: none;
					}

					.avatar {
						width: 95rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						align-items: center;

						image {
							width: 60rpx;
							height: 60rpx;
							border-radius: 50rpx;
						}

						view {
							color: #333333;
							font-size: 24rpx;
							font-weight: 400;
						}
					}

					.item_view {
						height: 60rpx;
						flex: 1;
						display: flex;
						flex-direction: column;
						justify-content: space-between;

						.phone {
							color: #333333;
							font-size: 28rpx;
							font-weight: bold;
						}

						.time {
							color: #999999;
							font-size: 24rpx;
							font-weight: 400;
						}
					}

					.status {
						width: 125rpx;
						text-align: right;
						color: #333333;
						font-size: 28rpx;
						font-weight: bold;
					}
				}
			}
		}
	}
</style>